<template>
	<view class="orderDetail">
		<view class="map">
			<map style="width: 100%; height:100%;" :latitude="lat" :longitude="lng" :markers="covers" show-location scale='14'></map>
		</view>
		<view class="container">
			<view class="status" v-if="datas.order_status == '1'">
				<view class="tit1">订单待付款</view>
				<view class="tit2">支付完成后立即开始派单</view>
			</view>
			<view class="status" v-if="datas.order_status == '2'">
				<view class="tit1">正在派单中</view>
				<view class="tit2">请耐心等待</view>
			</view>
			<view class="status" v-if="datas.order_status == '3'">
				<view class="tit1">洗匣士正在赶来</view>
				<view class="tit2">请耐心等候 留意洗匣士来电</view>
			</view>
			<!-- 待上门状态显示 -->
			<view class="worker dFlex jBetween_aCenter" v-if="datas.order_status >= '3'">
				<view class="workerInfo dFlex jStart_aCenter">
					<view class="workerTx imgPublic">
						<image :src="datas.store.store_img"></image>
					</view>
					<view class="otherInfo">
						<view class="workerName">{{datas.store.store_name}}</view>
						<view class="workerNum">{{datas.store.tel}}</view>
					</view>
				</view>
				<view class="callIcon imgPublic" @tap.stop='call(datas.store.tel)'>
					<image src="https://wx.gdxixiashi.com/public/images/person/dianhua@2x.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="orderInfo">
				<view class="add">
					<view class="addInfo">
						<view class="bigAdd">{{datas.area}}</view>
						<view class="smallAdd">{{datas.address}}</view>
						<view class="user">
							<text>{{datas.trueName}}</text>
							<text>{{datas.tel}}</text>
						</view>
					</view>
					<!-- <view class="add_address dFlex jEnd_aCenter">
						<view class="addBtn">添加至常用地址</view>
					</view> -->
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">订单编号</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.order_number}}</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">订单时间</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.create_time}}</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">预约时间</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.order_time}}</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">联系电话</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.tel}}</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter" v-if='datas.order_type != "3"'>
					<view class="lineTit">洗护方式</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal" v-if='datas.order_type == "1"'>免拆清洗</view>
						<view class="showVal" v-if='datas.order_type == "2"'>拆装清洗</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">洗护规格</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.spec}}</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">订单备注</view>
					<view class="lineVal dFlex jEnd_aCenter">
						<view class="showVal">{{datas.leave_word}}</view>
					</view>
				</view>
				<view class="prices">
					<view class="line dFlex jBetween_aCenter">
						<view class="lineTit">总价格</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">{{datas.product_total}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter">
						<view class="lineTit">优惠券</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">￥{{datas.coupon_amount}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter">
						<view class="lineTit">洗护券</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">￥{{datas.gold}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter">
						<view class="lineTit">实付</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">{{datas.orders_total}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter" v-if="datas.order_type == 2">
						<view class="lineTit">服务费用</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">{{datas.service_amount1}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter" v-if="datas.order_type == 2">
						<view class="lineTit">物流费用</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">{{datas.service_amount2}}</view>
						</view>
					</view>
					<view class="line dFlex jBetween_aCenter">
						<view class="lineTit">追加金额</view>
						<view class="lineVal dFlex jEnd_aCenter">
							<view class="showVal">{{datas.append_amount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="btns dFlex jAround_aCenter">
			<view class="btn len1 sty1" v-if='datas.order_status == "1"' @tap.stop='cancelOrder'>取消订单</view>
			<view class="btn len1 sty2" v-if='datas.order_status == "1"' @tap.stop='payOrder'>立即支付</view>
			<!-- <view class="btn len2 sty2" v-if='datas.order_status == "3"' @tap.stop='getDoor'>确认上门</view> -->
			<view class="btn len1 sty2" v-if='datas.order_status == "3"' @tap.stop='getDoor'>确认上门</view>
			<view class="btn len1 sty2" v-if='datas.is_pay == "1"' @tap.stop='payOther'>支付追加金额</view>
			<view class="btn len2 sty1" v-if='datas.order_status == "2"' @tap.stop='cancelOrder'>取消订单</view>
			<view class="btn len1 sty3" v-if='datas.order_status == "4"' @tap.stop='sureFinish'>确认完成</view>
		</view>
		<!-- 追缴弹窗 -->
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="toast">
				<view class="title">追缴费用</view>
				<view class='content'>
					<view class="amount">需支付：￥<text>{{datas.append_amount}}</text></view>
					<view class="ipt">
						<input type="text" v-model="useGold" placeholder="请输入想要使用的洗护券金额">
					</view>
					<view class="account">洗护券余额：{{gold?gold:"0.00"}}</view>
				</view>
				<view class="btns dFlex jBetween_aCenter">
					<view class="btn" @click="closePopup">取消</view>
					<view class="btn sure" @click='rePayOrder'>提交</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
 
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import QQMapWX from '../tools/qqmap-wx-jssdk.js';
	export default {
		components:{
			uniPopup,
		},
		data() {
			return {
				gold:'',
				useGold:"",
				orderId:'',
				
				lat:'',
				lng:'',
				covers:[], 
				oid:'',
				datas:{},
				is_show_pay:2,
			};
		},
		onLoad(e) {
			this.oid = e.oid;
			this.initUserInfo();
			this.initData();
			this.initMap();
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 用户洗护券金额
			initUserInfo(){
				this.tool.getUserInfo().then(res=>{
					this.gold = res.gold;
				}).catch(err=>{
					console.log(err);
				})
			},
			// 关闭洗护券弹窗
			closePopup(){
				this.$refs.popup.close();
			},
			// 支付追加费用
			rePayOrder(){
				if(this.useGold > this.datas.append_amount){
					uni.showToast({
						title:"最多使用"+this.datas.append_amount+'元洗护券抵扣',
						icon:"none"
					})
					return
				}
				if(parseFloat(this.useGold) > parseFloat(this.gold)){
					uni.showToast({
						title:'洗护券金额不足',
						icon:"none"
					})
					return;
				}
				var itemList2 = [];
				if(this.is_show_pay == 1){
					itemList2 = ['微信支付','支付宝支付'];
				}else{
					itemList2 = ["余额"];
				}
				
				uni.showActionSheet({
					// #ifdef MP-WEIXIN
					itemList :['微信支付'],
					// #endif
					
					// #ifdef APP-PLUS
					itemList :itemList2,
					// #endif
					
					success: (op) => {
						let pay_method = 1;
						if(op.tapIndex == 0){
							// #ifdef MP-WEIXIN
							pay_method = 2;	
							// #endif
							// #ifdef APP-PLUS
							if(this.is_show_pay == 1){
								pay_method = 4;
							}else{
								pay_method = 1;
							}
							// #endif
						}else if(op.tapIndex == 1){
							pay_method = 3;
						}
						this.tool.getData('Order/orderPay2',{
							orderId:this.oid,
							gold:this.useGold,
							pay_method:pay_method,
						}).then(res=>{
							console.log(res);
							if(res){
								if(pay_method == '2' || pay_method=='4'){
									uni.requestPayment({
										provider:'wxpay',
										timeStamp:res.weixin.timeStamp,
										nonceStr:res.weixin.nonceStr,
										package:res.weixin.package,
										signType:res.weixin.signType,
										paySign:res.weixin.paySign,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.initData();
											this.$refs.popup.close();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == 3){
									uni.requestPayment({
										provider:'alipay',
										orderInfo:res.alipay,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.initData();
											this.$refs.popup.close();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == 1){
									if(res.code == 200){
										uni.showToast({
											title:'订单支付成功',
											icon:"success"
										})
										this.initData();
										this.$refs.popup.close();
									}else{
											
										uni.showToast({
											title:res.msg,
											icon:"none"
										})
										
									}
									
								}
							}
						}).catch(err=>{
							console.log(err);
						})
					},
					fail:(err)=>{
						
					}
				})
			},
			// 订单详情
			initData(){
				this.tool.getData('Order/orderInfo',{
					orderId:this.oid,
				}).then(res=>{
					console.log(res);
					if(res){
						this.is_show_pay = res.is_show_pay;
						res.spec = '';
						res.products.map((item2,index2)=>{
							res.spec = index2 == res.products.length-1?res.spec+item2.specs_name:res.spec+item2.specs_name+'、';
						})
						this.covers.push({
							id:1,
							latitude:res.store.lat,
							longitude:res.store.lng,
							title:res.store.store_name,
							// iconPath:item.store_imgs?item.store_imgs:'https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/shop.png',
							iconPath:'/static/images/shop.png',
							width:30,
							height:30,
							callout:{
								content:res.store.store_name,
								color:'#ffffff',
								fontSize:14,
								borderRadius:4,
								borderWidth:1,
								borderColor:'#262E3B',
								bgColor:'#262E3B',
								padding:12,
								display:'BYCLICK',
								textAlign:'center'
							},
						})
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 支付追加金额
			payOther(){
				this.$refs.popup.open();
			},
			// 确认上门
			getDoor(){
				uni.showModal({
					content:'确定接单师傅已上门？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Order/orderChange',{
								orderId:this.datas.orderId,
								type:'1'
							}).then(res=>{
								console.log(res);
								if(res){
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 确认完成
			sureFinish(){
				uni.showModal({
					content:'确定该订单没有问题并已完结？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Order/orderChange',{
								orderId:this.datas.orderId,
								type:'3'
							}).then(res=>{
								console.log(res);
								if(res){
									uni.showToast({
										title:'订单已完结',
										icon:"success"
									})
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 支付订单
			payOrder(){
				var itemList2 = [];
				if(this.is_show_pay == 1){
					itemList2 = ['微信支付','支付宝支付'];
				}else{
					itemList2 = ["余额"];
				}
				
				uni.showActionSheet({
					// #ifdef MP-WEIXIN
					itemList :['微信支付'],
					// #endif
					
					// #ifdef APP-PLUS
					itemList :itemList2,
					// #endif
					
					success: (op) => {
						let pay_method = 1;
						if(op.tapIndex == 0){
							// #ifdef MP-WEIXIN
							pay_method = 2;	
							// #endif
							// #ifdef APP-PLUS
							if(this.is_show_pay == 1){
								pay_method = 4;
							}else{
								pay_method = 1;
							}
							// #endif
						}else if(op.tapIndex == 1){
							pay_method = 3;
						}
						this.tool.getData('Order/orderPay',{
							orderId:this.datas.orderId,
							pay_method:pay_method,
						}).then(res=>{
							console.log(res);
							if(res){
								if(pay_method == 2 || pay_method == 4){
									uni.requestPayment({
										provider:'wxpay',
										timeStamp:res.weixin.timeStamp,
										nonceStr:res.weixin.nonceStr,
										package:res.weixin.package,
										signType:res.weixin.signType,
										paySign:res.weixin.paySign,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.initData();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == 3){
									uni.requestPayment({
										provider:'alipay',
										orderInfo:res.alipay,
										success: () => {
											uni.showToast({
												title:'订单支付成功',
												icon:"success"
											})
											this.initData();
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'订单支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == 1){
									if(res.code == 200){
										uni.showToast({
											title:'订单支付成功',
											icon:"success"
										})
										this.initData();
										this.$refs.popup.close();
									}else{
											
										uni.showToast({
											title:res.msg,
											icon:"none"
										})
										
									}
									
								}
							}
						}).catch(err=>{
							console.log(err);
						})
					},
					fail:(err) => {
						console.log(err);
					},
				})
			},
			// 拨打电话
			call(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			// 取消订单
			cancelOrder(orderId){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Order/orderChange',{
								orderId:this.datas.orderId,
								type:'2'
							}).then(res=>{
								console.log(res);
								if(res){
									uni.showToast({
										title:'订单已取消',
										icon:"none"
									})
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			initMap(status){
				const tMap = new QQMapWX({
				    key: getApp().globalData.mapKey //开发者密钥
				});
				uni.getLocation({
					type:'wgs84',
					success: (res) => {
						console.log(res);
						this.lat = res.latitude;
						this.lng = res.longitude;
					},
					fail:(err)=>{
						console.log(err);
					},
					complete:()=>{
						if(status){
							this.initList();
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.orderDetail{
		width: 100%;
		.uni-popup__wrapper-box{
			width: 84%;
			margin: 0 auto;
			.toast{
				width: 100%;
				background: white;
				border-radius:6px;
				overflow: hidden;
				.btns{
					width: 100%;
					position: relative;
					.btn{
						padding: 10px 0;
						flex: 1;
						text-align: center;
					}
					.sure{
						background:#1664FF;
						color: white;
					}
				}
				.content{
					width: 100%;
					padding:12px;
					box-sizing: border-box;
					.ipt{
						margin:10px 0; 
						background:#eeeeee;
						border-radius: 4px; 
						padding:10px;
						box-sizing: border-box; 
						width:100%;
					} 
					.amount{
						text-align: center;
						text{
							font-size: 26px;
							font-weight: bold;
							color:#FF3B2F;
						}
					}
				}
				.title{
					width: 100%;
					text-align: center;
					padding: 12px 0;
					font-weight: bold;
				}
			}
		}
		.btns{
			width: 100%;
			padding: 12px 4%;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				padding: 10px 0;
				border: 1px solid transparent;
				border-radius: 4px;
				text-align: center;
			}
			.len1{
				width: 46%;
			}
			.len2{
				width: 100%;
			}
			.sty1{
				color: #999999;
				border-color: #999999;
			}
			.sty2{
				color: white;
				background: linear-gradient(-45deg,#1d69ff 0%, #609ff8 100%);
			}
			.sty3{
				color: #1664FF;
				border-color: #1664FF;
			}
		}
		.container{
			width: 100%;
			border-radius: 16px 16px 0px 0px;
			box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.10); 
			.orderInfo{
				width: 100%;
				/* padding: 0 4%;
				box-sizing: border-box; */
				background: white;
				.prices{
					padding: 12px 0;
					box-sizing: border-box;
					margin-top: 12px;
					border-top: 8px solid #F8F8F8;
				}
				.line{
					padding: 8px 4%;
					box-sizing: border-box;
					width: 100%;
					// border-bottom: 1px solid #eeeeee;
					.lineTit{
						color: #666666;
						width: max-content;
					}
					.lineVal{
						flex: 1;
						margin-left: 12px; 
						.showVal{
							width: max-content;
						}
					}
				}
				.line:last-child{
					border: none;
				}
				.add{
					width: 100%;
					padding: 20px 4% 12px;
					box-sizing: border-box;
					margin-bottom: 6px;
					border-bottom: 1px solid #DDDDDD;
					.addInfo{
						width: 100%;
						.user{
							font-size: 12px;
						}
						.bigAdd{
							font-size: 12px;
							color: #999999;
						}
						.smallAdd{
							margin: 12px 0 10px;
							font-size: 17px;
							color: #333333;
							font-weight: bold;
						}
					}
					.add_address{
						width: 100%;
						margin-top:6px;
						.addBtn{
							width: max-content;
							font-size: 12px;
							color: #666666;
							border-radius:4px;
							border: 1px solid #DDDDDD;
							padding: 6px 8px;
						}
					}
				}
			}
			.worker{
				width: 100%;
				margin: 12px auto;
				background: white;
				padding: 12px 4%;
				box-sizing: border-box;
				.workerInfo{
					flex: 1;
					.otherInfo{
						flex: 1;
						color: #666666;
						font-size: 12px;
						.workerName{
							color: #20202E;
							font-size: 16px;
							margin-bottom: 6px;
						}
					}
					.workerTx{
						width: 46px;
						height:46px;
						margin-right: 12px;
						image{
							height: 100%;
						}
					}
				}
				.callIcon{
					width: 36px;
					height: 36px;
				}
			}
			.status{
				width: 100%;
				padding: 24px 4% 12px;
				box-sizing: border-box;
				font-size: 13px;
				background: white;
				color: #666666;
				.tit1{
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 8px;
					color: #333333;
				}
			}
		}
		.map{
			width: 100%;
			height: 375px;
		}
	}
</style>